<!--处置-->
<script setup>
import DetailItem from '@/views/workOrder/components/DetailItem.vue'
import FileList from '@/components/FilePreviewer/FileList.vue'
import { useRouter } from 'vue-router/composables'
import CustomTextarea from '@/views/workOrder/components/CustomTextarea.vue'
import CustomTagsInput from '@/views/workOrder/components/CustomTagsInput.vue'
import { disposeOrderDispose } from '@/apis/order.js'
import { Toast } from 'vant'
import UploadTrigger from '@/components/FilePreviewer/UploadTrigger.vue'

const router = useRouter()

const submitLoading = ref(false)
const disposeFormRef = ref('')
const formData = reactive({
  opinion: null,
  attachmentInfo: [],
  relatedEnterpriseList: [],
  relatedUserList: []
})
const rules = reactive({
  opinion: [{ required: true, message: '处置结果不能为空！' }]
})

// 提交表单
async function onSubmit() {
  disposeFormRef.value
    .validate()
    .then(async () => {
      try {
        submitLoading.value = true
        const params = {
          orderNo: router.currentRoute.query.orderNo,
          opinion: formData.opinion,
          attachmentInfo: formData.attachmentInfo?.map((item) => ({
            originalName: item.originalName,
            url: item?.url
          })),
          relatedEnterpriseList: formData.relatedEnterpriseList?.map(
            (item) => ({
              name: item
            })
          ),
          relatedUserList: formData.relatedUserList?.map((item) => ({
            name: item
          }))
        }
        const res = await disposeOrderDispose(params)
        submitLoading.value = false
        if (res.ret === 0) {
          Toast.success('保存成功')
          router.back()
        } else {
          Toast.fail(res.msg || '保存失败')
        }
      } catch (error) {
        submitLoading.value = false
        Toast.fail('网络错误，请稍后再试~')
      }
    })
    .catch((error) => {
      Toast(error[0].message)
    })
}
</script>

<template>
  <div class="bg-#F7F8FA h-full">
    <van-form
      ref="disposeFormRef"
      class="bg-white"
      scroll-to-error
      :show-error-message="false"
      validate-first
    >
      <CustomTagsInput
        label="涉及对象"
        :value.sync="formData.relatedEnterpriseList"
      />
      <CustomTagsInput
        label="涉及人员"
        :value.sync="formData.relatedUserList"
      />
      <CustomTextarea
        required
        :rules="rules.opinion"
        :modelValue.sync="formData.opinion"
        label="处置结果"
      />
      <div class="px-16px">
        <DetailItem label="处置凭证" top>
          <FileList
            removable
            :upload="true"
            :preview="true"
            :files.sync="formData.attachmentInfo"
            :imageMax="9"
            :otherMax="9"
          >
            <template #empty="{ handleUpload }">
              <div class="h-80px w-80px" @click="handleUpload">
                <UploadTrigger icon-size="7vw" />
              </div>
            </template>
          </FileList>
        </DetailItem>
      </div>
    </van-form>
    <div class="py-24px px-16px">
      <van-button
        :disabled="!formData.opinion"
        type="primary"
        size="normal"
        block
        @click="onSubmit"
        :loading="submitLoading"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.van-button--primary {
  font-size: 16px;
  line-height: 16px;
  font-weight: 500;
  color: #fff;
  background-color: #36b374;
  border: 1px solid #36b374;
  border-radius: 4px;
}
</style>
